<template>
  <div id="create">
    <div style="margin: 20px;"></div>
    <el-form
      @submit.native.prevent="sendArticle"
      :label-position="labelPosition"
      label-width="80px"
      :model="Article"
    >
      <el-form-item label="标题">
        <el-input v-model="Article.title"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <el-input type="textarea" v-model="Article.body"></el-input>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" native-type="submit">立即创建</el-button>
        <el-button native-type="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "top",
      Article: {
        title: "",
        body: ""
      }
    };
  },
  methods: {
    sendArticle() {
      this.$http.post("articles", this.Article).then(res => {
        if (res.statusText==='OK') {
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.$router.push('/articles/List');
        }
      });
    }
  }
};
</script>

<style>
#create {
  width: 50%;
}
</style>
